<template>
  <div class="my">
    <!-- <van-nav-bar style="background-color: #0283ef; color:#fff" title="我的" right-text="登录" @click-right="onClickRight" /> -->
    <!-- <div class="title">我的</div> -->
    <div class="my-content" style="height: 150px">
      <van-image
        class="sculpture"
        round
        style="margin-left: 16px; margin-top: 25px"
        width="80"
        height="80"
        fit="cover"
        :src="tx"
      />
      <div
        class="my-title"
        style="margin-top: 25px; margin-left: 10px"
        v-if="!!username"
      >
        <div class="name" style="font-size: 18px">
          {{ username ? hideNumber(username) : "" }}
          <span style="font-size: 12px">{{ userInfo.vipLevel }}</span>
        </div>
        <div class="tel" style="font-size: 12px">
          审核状态：<span class="status"
            >{{ checkStatusName }}</span
          >
        </div>
        <div class="tel" style="font-size: 12px">
          登录状态：<span class="status"
            >已登录</span
          >
        </div>
      </div>
      <div
        class="my-title"
        v-if="!username"
        style="margin-top: 35px; margin-left: 10px"
      >
        <div style="font-size: 14px; margin-bottom: 12px; color: #fff">
          系统检测您还未登录
        </div>
        <van-button
          @click="() => $router.push('/login')"
          type="primary"
          size="small"
          >立即登录</van-button
        >
      </div>
    </div>
    <van-notice-bar v-if="checkStatusName === '未审核'"
      left-icon="volume-o"
      scrollable
      text="系统检测您还没填写账户信息，请点击账户维护填写账户信息，审核通过后才可正常投保"
    />
    <van-notice-bar v-if="walletPassSatus && checkStatusName !== '未审核'"
      left-icon="volume-o"
      scrollable
      text="系统检测您还没设置支付密码，可点击我的钱包设置支付密码密码"
    />
    <van-cell-group class="mar-top-1em">
      <van-cell
      style="font-size:16px; padding: 10px 16px !important;"
        title="我的保单"
        is-link
        @click="
          () => {
            $router.push('/guaranteeSlip');
          }
        "
      >
        <template #icon>
          <van-icon name="chakandingdan" size="20" class-prefix="icon" />
        </template>
      </van-cell>
      <van-cell
      style="font-size:16px; padding: 10px 16px !important;"
        title="我的理赔"
        is-link
        @click="
          () => {
            $router.push('/settlementOfClaim');
          }
        "
      >
        <template #icon>
          <van-icon name="baoxiao" size="20" class-prefix="icon" />
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="mar-top-1em">
      <van-cell
      style="font-size:16px; padding: 10px 16px !important;"
        title="我的钱包"
        is-link
        value=""
        @click="
          () => {

            if (username && checkStatusName !== '审核通过') {
              $toast('审核还未通过，不能点开钱包')
              return
            }
            $router.push('/wallet');
          }
        "
      >
        <template #icon>
          <van-icon name="dikouquan" size="20" class-prefix="icon" />
        </template>
      </van-cell>
      <van-cell
      style="font-size:16px; padding: 10px 16px !important;"
        title="常用投保人"
        is-link
        @click="
          () => {
            $router.push('/applicant');
          }
        "
      >
        <template #icon>
          <van-icon name="gerenshezhi" size="20" class-prefix="icon" />
        </template>
      </van-cell>
      <van-cell
      style="font-size:16px; padding: 10px 16px !important;"
        title="银行账户"
        is-link
        @click="
          () => {
            $router.push('/bankAccount');
          }
        "
      >
        <template #icon>
          <van-icon name="kabao" size="20" class-prefix="icon" />
        </template>
      </van-cell>
      <van-cell
      style="font-size:16px; padding: 10px 16px !important;"
        title="发票信息"
        is-link
        @click="
          () => {
            $router.push('/invoiceMsg');
          }
        "
      >
        <template #icon>
          <van-icon name="shoudaofapiao" size="20" class-prefix="icon" />
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="mar-top-1em">
      <van-cell
      style="font-size:16px; padding: 10px 16px !important;"
        title="账户变更"
        is-link
        icon="location-o"
        @click="
          () => {
            $router.push('/accountChange');
          }
        "
      >
        <template #icon>
          <van-icon name="xinxibiangeng" size="20" class-prefix="icon" />
        </template>
      </van-cell>
      <van-cell
      style="font-size:16px; padding: 10px 16px !important;"
        title="我的消息"
        is-link
        @click="
          () => {
            $router.push('/message');
          }
        "
      >
        <template #default v-if="hasNoRead">
          <div style="color: red; ">新消息</div>
        </template>
        <template #icon>
          <van-icon name="mianxingxiaoxi" size="20" class-prefix="icon" />
        </template>
      </van-cell>
      <van-cell
      style="font-size:16px; padding: 10px 16px !important;"
        title="修改登录密码"
        is-link
        @click="
          () => {
            $router.push('/changePassword');
          }
        "
        icon="location-o"
      >
        <template #icon>
          <van-icon name="mima" size="20" class-prefix="icon" />
        </template>
      </van-cell>
      <van-cell title="账户维护" style="font-size:16px; padding: 10px 16px !important;" is-link @click="toAccount" icon="location-o">
        <template #icon>
          <van-icon name="zhanghu" size="20" class-prefix="icon" />
        </template>
      </van-cell>
      <van-cell title="联系我们" style="font-size:16px; padding: 10px 16px !important;" @click="toContactUs" is-link icon="location-o">
        <template #icon>
          <van-icon name="lianxiwomen" size="20" class-prefix="icon" />
        </template>
      </van-cell>
    </van-cell-group>
    <div style="margin: 16px" v-if="hasToken">
      <van-button block type="info" @click="logOut">退出登录</van-button>
    </div>
    <div style="margin-top: 30px; height: 30px; width: 100%"></div>
  </div>
</template>

<script>
import { isWechatOfficialAccount } from '@/utils/func.js'
import tx from '../../assets/imgs/tx.png'
const time = 50000;
export default {
  name: "my",
  data() {
    return {
      tx,
      timer: null,
      username: localStorage.getItem("username"),
      messageList: [],
      hasNoRead: false,
      walletPassSatus: false
    };
  },
  computed: {
    userInfo() {
      const info = localStorage.getItem("userInfo")
      if (info) {
        return JSON.parse(info)
      } else {
        return {}
      }
    },
    checkStatusName() {
      const userInfo = localStorage.getItem("userInfo");
      if (userInfo) {
        const checkStatus = JSON.parse(userInfo).checkStatus;
        return checkStatus === "0"
          ? "未审核"
          : checkStatus === "1"
          ? "待审核"
          : checkStatus === "2"
          ? "审核未通过"
          : checkStatus === "3"
          ? "审核通过"
          : "";
      }
      return "";
    },
    hasToken() {
      return localStorage.getItem("token") || "";
    },
  },
  methods: {
    getWxCode() {
      if (localStorage.getItem("openId") || !isWechatOfficialAccount()) {
        return
      }
      const appid = "wx10cb9301f0cb5a95"; //个人公众号appid
      const redirect = encodeURIComponent(window.location.href); //重定向回来的地址

      const wx_code = this.getUrlParam("code"); // 截取url中的code
      //获取code的地址。获取成功重定向后地址栏中将会带有code，判断没有code的话，就跳转到微信官方链接上获取，获取成功后会再重定向回来，注意url是需要使用encodeURIComponent处理一下编码的
      if (!wx_code) {
        // scope: 必传；应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
        // 静默授权
        const url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect"
        window.location.href = url
      } else {
        // 获取到了code
        this.getOpenId(wx_code); //把code传给后台获取用户信息
      }
    },
    getUrlParam(name) {
      name = name.replace(/[[\]]/g, '\\$&');
      var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
      var results = regex.exec(window.location.search);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, ' '));
    },
    getOpenId(code) {
      this.$get("/wx/getOpenId", { code }).then((res) => {
        if (res && res.code * 1 === 200) {
          if (res.data) {
            localStorage.setItem("openId", res.data);
          } else {
            this.$toast({
              message: "获取openId失败，请推出后重新进入页面",
              duration: 3000,
            });
          }
        }
      });
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.getMessageList();
      }, time);
    },
    getMessageList() {
      this.$get("/config/inform/list").then((response) => {
        // 处理你的数据
        this.messageList = response.rows;
        this.messageList.forEach((item) => {
          if (item.readStatus * 1 === 1) {
            this.hasNoRead = true;
          }
        });
      });
    },
    logOut() {
      localStorage.removeItem("username");
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      this.$router.push("/login");
    },
    hideNumber(number) {
      return number.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    },
    onClickRight() {
      this.$toast("按钮");
    },
    toContactUs() {
      this.$router.push("/contactUs");
    },
    toAccount() {
      this.$router.push("/account");
    },
    getWallerData() {
      this.$post("/customer/wallet/info").then((res) => {
        if (res && res.code * 1 === 200) {
          this.walletPassSatus = !res.data.walletPassSatus
        }
      });
    },
  },
  mounted() {
    if (this.hasToken) {
      this.getWxCode()
      this.startTimer();
      this.getMessageList();
      if (this.checkStatusName === '审核通过') {
        this.getWallerData()
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
<style lang="less" scoped>
.icon {
  margin-right: 2rem;
}
.my {
  background-color: #f5f5f5;
  font-size: 1rem;
}

.title {
  height: 3.2em;
  background-color: #0283ef;
  text-align: center;
  line-height: 3.2em;
  color: #fff;
  font-size: 1.5em;
}

.sculpture {
  float: left;
}

.my-content {
  padding-top: 2em;
  padding-left: 1rem;
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
  background-color: #0283ef;
}

.my-title {
  float: left;
  margin-left: 0.8rem;
}

.name {
  font-size: 0.6rem;
  margin-top: 0.6em;
  color: #fff;
}

.tel {
  font-size: 0.4rem;
  margin-top: 0.6em;
  color: rgb(156, 182, 255);
}

.status {
  color: #ffffff;
}

.mar-top-1em {
  margin-top: 1em;
}
</style>